<template>
  <el-dialog
    v-model="dialogVisible"
    :title="info?.name ? '修改' : '新增'"
    width="30%"
    @close="$emit('clonse')"
  >
    <el-form>
      <el-form-item label="时间" prop="data">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="请选择一个时间"
          :disabled-date="disablesDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input v-model.number="form.order"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeAdd">Cancel</el-button>
      <el-button type="primary" @click="save()">Confirm</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import User from "../class/User";
const props = defineProps({
  isShow: Boolean,
  info: User,
});
const emit = defineEmits(["clonse", "success"]);
const dialogVisible = computed(() => props.isShow);
const form = ref<User>({
  id: "",
  date: "",
  name: "",
  address: "",
  order: 0,
});
const closeAdd = () => {
  emit("clonse");
};
const save = () => {
  emit("success");
};
const disablesDate = (time: any) => {
  const _maxTime = Date.now() - 24 * 60 * 60 * 60 * 1000 * 1;
  return time.getTime() <= _maxTime;
};
watch(
  () => props.info,
  (newInfo) => {
    if (newInfo) {
      form.value = {
        id: newInfo.id,
        date: newInfo.date,
        name: newInfo.name,
        address: newInfo.address,
        order: newInfo.order,
      };
    }
  }
);
</script>
